<template>
    <img src="res/ui/boxBg.png" :width="width" :height="height" grid="48,25,30,25"></img>
    <txt :text="title" :x="titleX" y="10" size="24" color="#ffffff"></txt>
    <img src="res/ui/colorNone.png" :width="drag.width" :height="drag.height" @down="down" @up="up" @move="move"></img>
    <tpl src="tpl/components/button.tpl" :x="closeX" y="8" icon="res/ui/close.png" @click="close()"></tpl>
</template>

<script>
    data(){
        return {
            drag: {
                x: 0,
                y: 0,
                width: 800,
                height: 50
            },
            closeX: 0,
            title: "对话框",
            titleX: 175,
            draging: false,
            pyX: 0,
            pyY: 0
        }
    }

    create() {
        this.closeX = this.width - 55;
        this.titleX = (this.width - this.title.length * 24)/2;
        if(this.drag.width == 800){
            this.drag.width = this.width;
        }
        console.log("dialog create", this.drag);
    }

    update(delta) {

    }

    destroyed() {
        this.index = 99;
    }

    close(){
        this.visible = false;
    }

    down(event){
        console.log("drag down");
        this.pyX = event.x - this.x;
        this.pyY = event.y - this.y;
        this.draging = true;
    }

    up(event){
        this.draging = false;
    }

    move(event){
        if (this.draging) {
            this.x = event.x - this.pyX;
            this.y = event.y - this.pyY;
        }
    }
</script>